<template>
  <view v-if="userTicket.visible" class="edu-drawer">
    <u-mask :z-index="999" :show="userTicket.visible"></u-mask>
    <view class="edu-drawer-content">
      <view class="coupon-title">
        <u-image
          v-if="userTicket.newUser == 1"
          width="155px"
          height="30px"
          src="@/static/images/home_coupontitle1_img.png"
        >
        </u-image>
        <u-image v-else width="155px" height="30px" src="@/static/images/home_coupontitle2_img.png">
        </u-image>
      </view>
      <view
        class="edu-drawer-center-box"
        :style="[{ height: userTicket.list.length > 4 ? '672rpx' : 'auto' }]"
      >
        <scroll-view class="u-drawer__scroll-view" scroll-y="true">
          <view class="coupon-list">
            <view class="coupon-item" v-for="item in userTicket.list" :key="item.id">
              <view
                v-if="item.coupon_type == 1"
                class="mutable"
                :class="{
                  font16: item.price.toString().length > 6,
                  font12: item.price.toString().length > 8,
                }"
              >
                {{ item.price | formatCurrency }}
              </view>
              <view v-else class="mutable" :class="{ font16: item.discount.toString().length > 6 }">
                {{ item.discount }}折
              </view>
              <view class="content">
                <view v-if="item.coupon_type == 1" class="signal">满{{ item.maxprice }}元可用</view>
                <view v-else class="signal">打折卡</view>
                <view v-if="item.effective_day == 0" class="parallel">永久有效</view>
                <view v-else class="parallel">有效期{{ item.effective_day }}天</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="coupon-tip">优惠券已放入“财务中心-我的卡券”列表</view>
      <view class="coupon-btn" @click="onUse">去使用</view>
      <view class="coupon-close" @click="onClose">
        <u-icon name="close-circle" color="#ffffff" size="25px"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      userTicket: (state) => state.user.ticket,
    }),
  },
  methods: {
    /*关闭弹窗*/
    onClose() {
      this.$store.commit('user/useUserTicketDialog', false)
    },
    // 去使用
    onUse() {
      this.onClose()
      this.$u.route({ type: 'switchTab', url: 'pages/course/index' })
    },
  },
}
</script>

<style lang="scss" scoped>
.edu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  .edu-drawer-content {
    width: 530rpx;
    padding: 32rpx 0 60rpx;
    background: linear-gradient(180deg, #ff9d30 0%, #ff460c 100%);
    border-radius: 40rpx;
    position: absolute;
    z-index: 1003;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .coupon-title {
      margin-bottom: 24rpx;
      display: flex;
      justify-content: center;
    }
    .edu-drawer-center-box {
      height: 300px;
      .u-drawer__scroll-view {
        width: 100%;
        height: 100%;
      }
    }
    .coupon-list {
      padding: 0 36rpx;
      .coupon-item {
        height: 120rpx;
        display: flex;
        align-items: center;
        background-image: url('@/static/images/home_coupon_bg.png');
        background-size: 100% 100%;
        & + .coupon-item {
          margin-top: 28rpx;
        }
        .mutable {
          flex: 0 0 180rpx;
          font-size: 40rpx;
          font-weight: 600;
          color: $edu-price-color;
          text-align: center;
          &.font16 {
            font-size: 32rpx;
          }
          &.font12 {
            font-size: 24rpx;
          }
        }
        .content {
          flex: 1;
          margin-left: 26rpx;
          .signal {
            font-size: 28rpx;
            font-weight: 600;
            color: $edu-main-color;
            line-height: 40rpx;
          }
          .parallel {
            margin-top: 6rpx;
            font-size: 22rpx;
            font-weight: 400;
            color: $edu-tips-color;
            line-height: 32rpx;
          }
        }
      }
    }
    .coupon-tip {
      margin-top: 24rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #ffc7b1;
      line-height: 28rpx;
      text-align: center;
    }
    .coupon-btn {
      width: 190rpx;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      background: linear-gradient(180deg, #ffd12d 0%, #ff9d14 100%);
      border-radius: 43rpx;
      position: absolute;
      left: 50%;
      margin-left: -95rpx;
      bottom: -40rpx;
    }
    .coupon-close {
      position: absolute;
      left: 50%;
      margin-left: -12px;
      bottom: -130rpx;
    }
  }
}
</style>
